<template>
  <div class="alls">
    <div class="bottom">
      <div class="bottom-one">
        <!-- {{requestHeaders['Authorization']}} -->
        <h3>第一步：应用信息</h3>
        <div class="list">
          <div class="titles">应用名称:</div>
          <div class="inputs2">
            <el-select class="innner" size="mini" v-model="applyName" placeholder="请选择">
              <el-option
                v-for="item in applyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="list">
          <div class="titles">版本号:</div>
          <div class="inputs2">
            <el-input class="innner" size="mini" v-model="versionNum" placeholder="请输入版本号,格式X.X.X"></el-input>
          </div>
        </div>
        <div class="list">
          <div class="titles">平台:</div>
          <div class="inputs2">
            <el-select class="innner" size="mini" v-model="platformName" placeholder="请选择">
              <el-option
                v-for="item in platformOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- <div>
            <el-button style="margin:auto;" size="mini" type="primary">下一步</el-button>
        </div>-->
      </div>
      <div class="bottom-two">
        <h3>第二部：APK上传</h3>
        <el-upload
          :disabled="upsw"
          class="upload-demo"
          :action="`api/app/fileUpload/flUpdateAppAdd?name=${applyName}&version=${versionNum}&platform=${platformName}`"
          :headers="requestHeaders"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-success="onSuccess"
          :on-error="onError"
          :multiple="false"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <div slot="tip" class="el-upload__tip">只能上传apk文件</div>
          <el-button size="small" type="primary" :disabled="upsw">点击上传</el-button>
        </el-upload>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    console.log("*****************************");
    console.log(this.requestHeaders);
  },
  data() {
    return {
      //请求头
      requestHeaders: {
        Authorization: this.$store.state.user.token,
      },
      //应用名
      applyOptions: [
        {
          value: "沣澜智慧水务移动办公系统",
          label: "沣澜智慧水务移动办公系统",
        },
      ],
      applyName: "",
      //版本号
      versionNum: "",
      //平台
      platformOptions: [
        {
          value: "Android",
          label: "Android",
        },
      ],
      platformName: "",

      fileList: [
        // {
        //   name: "food.jpeg",
        //   url:
        //     "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
      ],
    };
  },
  computed: {
    upsw() {
      if (
        this.applyName == "" ||
        this.versionNum == "" ||
        this.platformName == ""
      ) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //上传成功
    onSuccess(response, file, fileList) {
      this.$message({
        message: response.message,
        type: "success",
      });
      this.$emit('transmitIndex','success')
    },
    //上传失败
    onError(err, file, fileList) {
      this.$message.error(err.message);
    },
    //清空表单
    clearChildFun(BOO) {
      if (BOO) {
        this.applyName = "";
        this.versionNum = "";
        this.platformName = "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.alls {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  .bottom {
    .bottom-one {
      .list {
        display: flex;
        margin: 10px 0px;
        .titles {
          width: 70px;
        }
        .inputs2 {
          flex: 100;
          .innner {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>